<template>
    <div>
        <el-button type="primary" @click="dialogFormVisible=true;formData={}; title='添加'">添加</el-button>

        <el-table :data="List" border style="width: 100%" height="500px">
            <el-table-column fixed prop="" label="序号" width="50">
                <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column fixed prop="recordid" label="商品编号" width="100"/>
            <el-table-column fixed prop="recordname" label="商品名称"/>
            <el-table-column fixed prop="schoolname" label="品种"/>
            <el-table-column fixed prop="regionname" label="地区" width="100"/>
            <el-table-column fixed prop="recordmoney" label="数量" width="60"/>
            <el-table-column fixed prop="songsnumber" label="单价" width="60"/>
            <el-table-column fixed prop="recordstate" label="状态" width="60">
                <template slot-scope="scope" >
                    <span v-if="scope.row.recordstate === 0" style="color:green">{{scope.row.recordstate === 0?'上架':'下架'}}</span>
                    <span v-else style="color: red">{{scope.row.recordstate === 0?'上架':'下架'}}</span>
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="170">
                <template slot-scope="scope">
                    <el-button type="text" @click="logFormVisible=true;form=Object.assign({},scope.row)">进货</el-button>
                    <el-button type="text" @click="FormVisible = true;form=Object.assign({},scope.row)">上下架</el-button>
                </template>
            </el-table-column>
        </el-table>


        <el-dialog title="添加" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="商品编号" :label-width="formLabelWidth">
                    <el-input v-model="form.recordid" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品名称" :label-width="formLabelWidth">
                    <el-input v-model="form.recordname" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="品种" :label-width="formLabelWidth">
                    <el-select v-model="form.schoolid" placeholder="请选择">
                        <el-option
                            v-for="item in redsch"
                            :key="item.schoolid"
                            :label="item.schoolname"
                            :value="item.schoolid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="地区" :label-width="formLabelWidth">
                    <el-select v-model="form.regionid" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.regionid"
                            :label="item.regionname"
                            :value="item.regionid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="单价" :label-width="formLabelWidth">
                    <el-input-number v-model="form.recordmoney" controls-position="right":disabled="true" @change="handleChange" :min="0"/>
                </el-form-item>

                <el-form-item label="单价" :label-width="formLabelWidth">
                    <el-input-number v-model="form.songsnumber" controls-position="right":disabled="true" @change="handleChange" :min="0"/>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-input v-model="form.recordstate" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false;submits('form')">确 定</el-button>
            </div>
        </el-dialog>


        <el-dialog title="进货" :visible.sync="logFormVisible">
            <el-form :model="form">
                <el-form-item label="商品编号" :label-width="formLabelWidth">
                    <el-input v-model="form.recordid" autocomplete="off":disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="商品名称" :label-width="formLabelWidth">
                    <el-input v-model="form.recordname" autocomplete="off":disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="数量" :label-width="formLabelWidth">
                    <el-input-number v-model="form.recordmoney" controls-position="right" @change="handleChange" :min="0"/>
                </el-form-item>
                <el-form-item label="单价" :label-width="formLabelWidth">
                    <el-input-number v-model="form.songsnumber" controls-position="right" @change="handleChange" :min="0"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="logFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="logFormVisible = false;submit('form')">确 定</el-button>
            </div>
        </el-dialog>


        <el-dialog title="上下架" :visible.sync="FormVisible">
            <el-form :model="form">
<!--                <el-form-item label="商品编号" :label-width="formLabelWidth">-->
<!--                    <el-input v-model="form.recordid" autocomplete="off":disabled="true"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="数量" :label-width="formLabelWidth">-->
<!--                    <el-input-number v-model="form.recordmoney" controls-position="right" :disabled="true" @change="handleChange" :min="0"/>-->
<!--                </el-form-item>-->
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-select v-model="form.recordstate" placeholder="请选择">
                        <el-option value="0">上架</el-option>
                        <el-option value="1">下架</el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="FormVisible = false">取 消</el-button>
                <el-button type="primary" @click="FormVisible = false;submitss('form')">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
export default {
    name: "Record",
    data(){
        return{
            List:[],
            dialogFormVisible: false,
            logFormVisible: false,
            FormVisible: false,
            form: {
                recordstate:'1',
                songsnumber:'0',
                recordmoney:'0'
            },
            options:[],
            redsch:[],
            formLabelWidth: '120px'
        };
    },
    created() {
        this.getList();
        this.selectSch();
        this.selectRge();
    },
    methods: {
        getList() {
            this.$http.post('/record/select').then(res => {
                console.log(res)
                this.$data.List = res;
            })
        },
        handleChange(value) {
            console.log(value);
            // this.form={}
        },
        selectSch(){
            this.$http.post('/record/selectSch').then(res=>{
                this.$data.redsch = res;
            })
        },
        selectRge(){
            this.$http.post('/record/selectRge').then(res=>{
                this.$data.options = res;
            })
        },
        submits(from){
            this.$http.post('/record/addRed',this.$data.form).then(res=>{
                console.log(res)
                if (res){
                    this.$message.success("成功");
                    this.getList();
                    this.dialogFormVisible=false;
                }else {
                    this.$message.error("失败");
                    this.dialogFormVisible=false;
                }
            })
        },
        submit(from){
            this.$http.post('/record/updateInfo',{recordid:this.form.recordid,recordmoney:this.form.recordmoney,songsnumber:this.form.songsnumber,
                number:this.form.recordmoney,money:this.form.songsnumber,'price':this.form.recordmoney * this.form.songsnumber}).then(res=>{
                console.log(res)
                if (res){
                    this.$message.success("成功");
                    this.getList();
                    this.logFormVisible=false;
                }else {
                    this.$message.error("失败");
                    this.logFormVisible=false;
                }
            })
        },
        submitss(from){
            if(this.form.songsnumber<=0){
                this.$message.error("数量为0，不能上架");
            }else {
                this.$http.post('/record/updateState',this.$data.form).then(res=>{
                    console.log(res)
                    if (res){
                        this.$message.success("成功");
                        this.getList();
                        this.FormVisible=false;
                    }else {
                        this.$message.error("失败");
                        this.FormVisible=false;
                    }
                })
            }

        }
    }
}
</script>

<style scoped>

</style>
